<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:href="@{/css/main/style.css}" rel="stylesheet" type="text/css"/>
    <div th:include="common.html"></div>

</head>

<div id="app" class="container-fluid">

    <div class="container">
        <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">功能组</button>
        <div id="demo" class="collapse">
            <ul>
                <li><input type="text" class="form-control" style="width: 400px;height: 40px;margin-left: 400px" v-model="name" placeholder = '请输入用户名查询！'></li>
                <li><button class="btn btn-primary btn-round btn-sm" type="button"  data-toggle="modal" data-target="#myModal2" >
                    <span class="glyphicon glyphicon-search" @click="selectData">查询用户</span>
                </button></li></ul>
        </div>
    </div>

    <a-table
            style="padding-top: 30px;margin: auto;width: 1000px;"
            row-Key="id"
            :columns="columns"
            :data-source="dataSources"
            :pagination="pagination"
            :row-Selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :custom-Row="customRow"
            bordered
    >
         <span slot="action" slot-scope="record" style="width: 100px">
             <a-button size="small" type="danger"  @click.stop="deleteData(record.id)">删除</a-button>
        </span>
    </a-table>

    <!--bootstrap的模态对话框-->
    <div id="myModal" class="modal fade" role="dialog" aria-hidden="true">
        <div class="modal-dialog" style="border-radius:15px;">
            <div class="modal-content">
                <div class="modal-header" style="background: #F45B4B;" >
                    <h4 class="text-white">{{modalTitle}}</h4>
                    <button type="button" class="close text-white" data-dismiss="modal"
                            aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <form role="form" id="userAddForm">
                        <div class="form-group">
                            <label>姓名</label>
                            <input type="text" name="name" id="name" class="form-control" v-model="name">
                        </div>
                        <div class="form-group">
                            <label>性别</label>
                            <input type="text" name="sex" id="sex" class="form-control" v-model="sex">
                        </div>
                        <div class="form-group">
                            <label>出生年月</label>
                            <input type="text" name="birth" id="birth" class="form-control" v-model="birth">
                        </div>
                        <div class="form-group">
                            <label>电话号码</label>
                            <input type="text" name="phone" id="phone" class="form-control" v-model="phone">
                        </div>
                        <div class="form-group">
                            <label>爱好</label>
                            <textarea type="text" name="habby" id="habby" class="form-control" v-model="habby"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" >关闭</button>
                    <button type="button" class="btn btn-primary"  @click="operate()" >提交</button>
                </div>
            </div>

        </div>

    </div>
</div>
<script th:src="@{/myjs/user/user.js}"></script>
</body>
</html>
